<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="userSet">
      <el-tabs tab-position="left">
        <el-tab-pane label="基础设置">
          <div class="title_name">基础设置</div>
          <div class="user_data">
            <el-form class="form_body" :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-position="top">
              <el-form-item label="昵称">
                <el-input v-model="dataForm.userName" type="text" placeholder="请输入昵称"></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="dataForm.userName" type="text" placeholder="请输入邮箱"></el-input>
              </el-form-item>
              <el-form-item label="个人简介">
                <el-input v-model="dataForm.userName" type="textarea" placeholder="请输入个人简介"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="dataFormSubmitHandle()">更新基础信息</el-button>
              </el-form-item>
            </el-form>
            <div class="user_img">
              <el-upload
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                <img v-if="true" src="~@/assets/img/avatar.gif" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <p>点击更换头像</p>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="安全设置">
          <div class="title_name">安全设置</div>
          <div class="password_body">
            <div class="item_tab">
              <div class="left_body">
                <div class="text_top">账户密码</div>
                <p>当前密码强度：<span class="strong"><span>强</span></span></p>
              </div>
              <div class="right_body">
                <el-button type="text" size="small">修改</el-button>
              </div>
            </div>
            <div class="item_tab">
              <div class="left_body">
                <div class="text_top">密保手机</div>
                <p>已绑定手机：<span class="strong">138****8293</span></p>
              </div>
              <div class="right_body">
                <el-button type="text" size="small">修改</el-button>
              </div>
            </div>
            <div class="item_tab">
              <div class="left_body">
                <div class="text_top">密保问题</div>
                <p>未设置密保问题，密保问题可有效保护账户安全</p>
              </div>
              <div class="right_body">
                <el-button type="text" size="small">绑定</el-button>
              </div>
            </div>
            <div class="item_tab">
              <div class="left_body">
                <div class="text_top">MFA 设备</div>
                <p>未绑定 MFA 设备，绑定后，可以进行二次确认</p>
              </div>
              <div class="right_body">
                <el-button type="text" size="small">绑定</el-button>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="账号绑定">
          <div class="title_name">账号</div>
          <div class="password_body">
            <div class="item_tab">
              <div class="left_body">
                <div class="text_top">绑定微信</div>
                <p>当前未绑定微信账号</p>
              </div>
              <div class="right_body">
                <el-button type="text" size="small">绑定</el-button>
              </div>
            </div>
            <div class="item_tab">
              <div class="left_body">
                <div class="text_top">绑定邮箱</div>
                <p>当前未绑定绑定邮箱</p>
              </div>
              <div class="right_body">
                <el-button type="text" size="small">绑定</el-button>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="消息通知">
          <div class="title_name">消息通知</div>
          <div class="password_body">
            <div class="item_tab">
              <div class="left_body">
                <div class="text_top">账户密码</div>
                <p>其他用户的消息将以站内信的形式通知</p>
              </div>
              <div class="right_body">
                <el-switch
                    v-model="value"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                </el-switch>
              </div>
            </div>
            <div class="item_tab">
              <div class="left_body">
                <div class="text_top">系统消息</div>
                <p>系统消息将以站内信的形式通知</p>
              </div>
              <div class="right_body">
                <el-switch
                    v-model="value"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                </el-switch>
              </div>
            </div>
            <div class="item_tab">
              <div class="left_body">
                <div class="text_top">待办任务</div>
                <p>待办任务将以站内信的形式通知</p>
              </div>
              <div class="right_body">
                <el-switch
                    v-model="value"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                </el-switch>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-card>
</template>
<script>
import debounce from 'lodash/debounce'
import { clearLoginInfo } from '@/utils'
export default {
  data () {
    return {
      visible: false,
      value: '',
      dataForm: {
        userName: '',
        password: '',
        newPassword: '',
        comfirmPassword: ''
      }
    }
  },
  computed: {
    dataRule () {
      var validateComfirmPassword = (rule, value, callback) => {
        if (this.dataForm.newPassword !== value) {
          return callback(new Error('密码不一致'))
        }
        callback()
      }
      return {
        password: [
          { required: true, message: '请输入原始密码', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入新的密码', trigger: 'blur' }
        ],
        comfirmPassword: [
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          { validator: validateComfirmPassword, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init () {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
      })
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        this.$http.put('/sys/user/password', this.dataForm).then(({ data: res }) => {
          if (res.code !== 200) {
            return this.$message.error(res.msg)
          }
          this.$message({
            message: '提交成功',
            type: 'success',
            duration: 500,
            onClose: () => {
              this.visible = false
              clearLoginInfo()
              this.$router.replace({ name: 'login' })
            }
          })
        }).catch(() => {})
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>
<style scoped lang="scss">
  .userSet{
    .title_name{
      font-size: 20px;
      color: #333333;
      margin: 0 30px 30px 30px;
    }
    .news_body{
      margin: 0 30px 30px 30px;
    }
    .password_body{
      margin: 0 30px 30px 30px;
      .item_tab{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #efefef;
        margin-bottom: 40px;
        .text_top{
          font-size: 14px;
          color: #333333;
        }
        p{
          font-size: 12px;
          color: #999999;
        }
      }
    }
    .user_data{
      display: flex;
      margin: 0 30px 30px 30px;
      .form_body{
        width: 450px;
      }
      .user_img{
        margin: 0 50px;
        p{
          text-align: center;
          color: #999999;
          margin: 5px 0;
        }
        .avatar-uploader .el-upload {
          border: 1px dashed #d9d9d9;
          border-radius: 150px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
          border-color: #409EFF;
        }
        .avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 178px;
          height: 178px;
          line-height: 178px;
          border-radius: 150px;
          text-align: center;
        }
        .avatar {
          width: 178px;
          height: 178px;
          border-radius: 150px;
          display: block;
        }
      }
    }
  }
</style>
